<template>
  <nm-container>
    <el-form label-width="100px" :inline="true" style="background:white;padding-top:20px">
      <el-form-item label="线路名称：" prop="fare_scheme_name">
        <el-input v-model="list.model.fare_scheme_name" clearable />
      </el-form-item>
      <el-button size="medium" type="primary" @click="getData">查询</el-button>
      <nm-button size="medium" type="info" @click="refreshData">
        <nm-icon name="refresh"></nm-icon>
        重置
      </nm-button>
      <nm-button size="medium" v-bind="buttons.add" @click="add" />
    </el-form>

    <el-table ref="topictable" :max-height="tabheight" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column prop="fare_scheme_name" label="票价方案名称"> </el-table-column>
      <el-table-column prop="start_date" label="起始日期"> </el-table-column>
      <el-table-column prop="end_date" label="截止日期"> </el-table-column>
      <el-table-column prop="priority_level" label="优先级"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 1 ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="showdetail(scope.row)" type="text">编辑</el-button>
          <el-button @click="remove(scope.row)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="paginationChange" background layout="prev, pager, next" :total="total" />
    <!-- 新增/编辑 票价方案-->
    <el-dialog :title="title" :visible.sync="listShow" width="45%" style="margin-left:10%" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :label-width="labelWidth" :rules="rules">
        <el-form-item label="票价方案名称:" prop="fare_scheme_name">
          <el-input v-model="form.fare_scheme_name"></el-input>
        </el-form-item>
        <el-form-item label="起始日期:" prop="start_date">
          <el-date-picker v-model="form.start_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="截至日期:" prop="end_date">
          <el-date-picker v-model="form.end_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="优先级:" prop="priority_level">
          <el-input v-model="form.priority_level"></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁止" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" style="text-align: center;">
          <el-button type="primary" @click="submit('form')" v-if="show">新增</el-button>
          <el-button type="primary" @click="modification('form')" v-show="reveal">修改</el-button>

          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import SavePage from '../components/save'
import detailList from '../components/detailList'

const api = $api.dispatch.fare_scheme

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { SavePage, detailList },
  data() {
    return {
      getList: [],
      listShow: false,
      form: {
        fare_scheme_name: '',
        start_date: '',
        end_date: '',
        priority_level: '',
        status: '',
      },
      show: false,
      reveal: false,
      title: '',
      total: 0,
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {
          /** 票价方案名称 */
          fare_scheme_name: '',
        },
      },
      rules: {
        fare_scheme_name: { required: true, message: '请输入名称', trigger: 'blur' },
        start_date: { required: true, message: '请输入起始日期', trigger: 'blur' },
        end_date: { required: true, message: '请输入截止日期', trigger: 'blur' },
        priority_level: { required: true, message: '请输入优先级', trigger: 'blur' },
        status: { required: true, message: '请选状态', trigger: 'change' },
      },
      removeAction: api.remove,
      buttons: page.buttons,
      routeId: '',
      labelWidth: '110px',
      tabheight: 400,
      pageIndex: 1,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.getFareSchem()
  },
  methods: {
    //查询按钮
    getData() {
      this.getFareSchem()
    },
    //查询票价方案
    getFareSchem() {
      api.fareSchemeQuery({ fare_scheme_name: this.list.model.fare_scheme_name }).then((res) => {
        this.getList = res.rows
        this.total = res.total
      })
    },
    //重置按钮
    refreshData() {
      this.list.model.fare_scheme_name = ''
    },
    //添加按钮
    add() {
      this.show = true
      this.reveal = false
      this.listShow = true
      this.title = '新增票价方案'
      this.form = {}
    },
    //分页
    paginationChange() {},
    //新增
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          api
            .fareSchemeAdd(this.form)
            .then((res) => {
              this.getFareSchem()
              this.listShow = false
              this.$message.success('添加成功')
            })
            .finally(() => {
              loading.close()
            })
        }
      })
    },
    //编辑
    modification() {
      api.fareSchemeUpdate(this.form).then((res) => {
        this.getFareSchem()
        this.listShow = false
        this.$message.success('编辑成功')
      })
    },
    //取消
    close() {
      this.listShow = false
    },
    //删除
    remove(val) {
      api.fareSchemeDelete({ id: val.id }).then((res) => {
        this.getFareSchem()
        this.listShow = false
        this.$message.success('删除成功')
      })
    },
    // 编辑
    showdetail(val) {
      this.listShow = true
      this.title = '修改票价方案'
      this.form = val
      this.show = false
      this.reveal = true
    },
  },
}
</script>
